import React from 'react';
import { Button, message, Form, Input } from 'antd';
import './index.scss'

import {loginFn} from '../../api/user'

import { useDispatch } from 'react-redux';
import { changeUser } from '../../store/modules/user'

import { useHistory } from 'react-router';

const App = () => {
  const [messageApi, contextHolder] = message.useMessage();

  const dispatch = useDispatch()

  const router = useHistory()

  const onFinish = (values) => {

    console.log('Success:', values);

    // 表单验证
    // 判断 values.adminname 是否合法
    // 判断 values.password 是否合法
    // 密码加密也可以在这里进行(密码加密一定要在前端进行)

    
    loginFn(values).then(res => {
      // console.log(res);
      if(res.code === '200'){
        // 登录成功

        // 添加一个登录状态
        res.data.loginState = true

        // 将用户的登录信息保存在本地
        // 因为全局状态管理的数据，每次刷新页面后会恢复到初始状态
        localStorage.setItem('loginState', res.data.loginState)
        localStorage.setItem('token', res.data.token)
        localStorage.setItem('adminname', res.data.adminname)
        localStorage.setItem('role', res.data.role)
        localStorage.setItem('checkedkeys', JSON.stringify(res.data.checkedkeys))

        // 将用户状态存到全局状态管理中
        dispatch(changeUser(res.data))

        // 跳转到首页
        router.push('/')
      }else {
        // 登录失败
        messageApi.error('登录失败: ' + res.message)
      }
    })
  };

  return (<>
  {/* 渲染轻提示 */}
  {contextHolder}
<Form
    className='login-form'
    onFinish={onFinish}
  >
    <Form.Item
      label="账 号"
      name="adminname"
      rules={[
        {
          required: true,
          message: '请输入管理员账号!',
        },
      ]}
    >
      <Input />
    </Form.Item>

    <Form.Item
      label="密 码"
      name="password"
      rules={[
        {
          required: true,
          message: '请输入密码!',
        },
      ]}
    >
      <Input.Password />
    </Form.Item>

    <Form.Item>
      <Button type="primary" className='login-btn' htmlType="submit">
        登录
      </Button>
    </Form.Item>
  </Form>
  </>)
}

export default App;